<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head th:replace="_header_include::frag(~{::title},~{::style},~{})">
    <title>后台管理系统</title>
    <style>
        .addModule{}
        .resourceRow .el-checkbox{margin-left: 0;margin-right: 30px;}
    </style>
</head>
<body>
<div id="addModule" class="addModule mainPadding" style="display: none">  
    <el-breadcrumb separator="/" class="elBreadcrumb marginB20">
        <el-breadcrumb-item>Home</el-breadcrumb-item>
        <el-breadcrumb-item>业务设置</el-breadcrumb-item>
        <el-breadcrumb-item>电销顾问分配规则</el-breadcrumb-item>
    </el-breadcrumb> 
    <el-row class="mainWhiteBg">
        <div class="inforTitle">修改分配规则</div>
        <el-form :model="form" :rules="rules" ref="form" class="mainWhitePadding">
            <div class="inforTitle1"><em class="redcolor">*</em>必填项</div>
            <div class="borderbox padding20 marginB20">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="规则名称：" prop="assignName" :label-width="formLabelWidth">
                            <el-col :span="17">
                                <el-input v-model="form.assignName" disabled autocomplete="off" style="width: 100%;"
                                          maxlength="50"></el-input>
                            </el-col>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="品类:" :label-width="formLabelWidth">
                            <el-select v-model="form.industryCategory" placeholder="行业类别" filterable multiple style="width: 70%;">
                                <el-option
                                        v-for="item in industryCategoryArr"
                                        :key="item.value"
                                        :label="item.name"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="规则有效开始时间：" prop="startTime" :label-width="formLabelWidth">
                            <el-col :span="17">
                                <el-date-picker type="datetime" placeholder="选择日期时间" v-model="form.startTime" style="width: 100%;"></el-date-picker>
                            </el-col>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="规则有效结束时间：" prop="endTime" :label-width="formLabelWidth">
                            <el-col :span="17">
                                <el-date-picker type="datetime" placeholder="选择日期时间" v-model="form.endTime" style="width: 100%;"></el-date-picker>
                            </el-col>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="resourceRow">
                    <el-col :span="12">
                        <el-form-item label="资源类别：" prop="category" :label-width="formLabelWidth">
                            <el-checkbox-group v-model="form.category" disabled >
                                <el-checkbox v-for="item in categoryArr" :label="item.value" :key="item.value">{{item.name}}</el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="资源类型：" prop="type" :label-width="formLabelWidth">
                            <el-checkbox-group v-model="form.type" disabled >
                                <el-checkbox v-for="item in typeArr" :label="item.value" :key="item.value">{{item.name}}</el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                    </el-col>
                </el-row>
            </div>
            <div class="inforTitle1">选填项</div>
            <div class="borderbox padding20">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="" :label-width="formLabelWidth">
                            <el-tag
                                v-for="tag in tags"
                                :key="tag"
                                @close="handleClose(tag)"
                                style="margin-right: 10px;">
                                {{tag}}
                            </el-tag>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="" :label-width="formLabelWidth">
                            <el-tag
                                v-for="tag in areaTags"
                                :key="tag"
                                @close="handleCloseArea(tag)"
                                style="margin-right: 10px;">
                                {{tag}}
                            </el-tag>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-col :span="11">
                            <el-form-item label="包含搜索词：" :label-width="formLabelWidth">
                                <el-input v-model="form.searchWord" disabled   autocomplete="off"  maxlength="50"></el-input>                            
                            </el-form-item>
                        </el-col>
                        <el-col :span="1">&nbsp;</el-col>
                        <el-col :span="3">
                           <!-- <el-form-item>
                                <el-button type="primary" @click="handleInputConfirm">添加</el-button>                        
                            </el-form-item>   -->
                        </el-col>
                    </el-col>
                    <el-col :span="12">
                        <el-col :span="11">
                            <el-form-item label="地区：" prop="area" :label-width="formLabelWidth">
                                <el-input   disabled  v-model="form.area" autocomplete="off"  maxlength="50"></el-input>    
                            </el-form-item>
                        </el-col>
                        <el-col :span="1">&nbsp;</el-col>
                        <el-col :span="3">
                        <!-- <el-form-item>
                            <el-form-item>
                                <el-button  disabled  type="primary" @click="handleInputConfirmArea">添加</el-button>                        
                            </el-form-item>
                             -->
                        </el-col>
                    </el-col>
                </el-row>
                <el-form-item label="是否启用：" prop="status" :label-width="formLabelWidth">
                    <el-select v-model="form.status" placeholder="请选择">
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <div style="position: relative;">
                    <span style="color: #f56c6c;position: absolute;font-size: 16px;left: 29px;top: 10px;">*</span>
                    <el-form-item label="设定组内人员：" prop="choosePerson" :label-width="formLabelWidth">
                        <el-button type="primary" @click="addDomain">添加人员</el-button>
                    </el-form-item>
                </div> 
                <el-table :data="form.tableData" style="width: 100%" border>
                    <el-table-column align="center" prop="id" type="index" label="序号" width="55"></el-table-column>
                    <el-table-column align="center" prop="name" label="姓名">
                        <template slot-scope="scope">
                            <!-- <el-form-item prop="person"> -->
                            <el-form-item :prop="'tableData.' + scope.$index + '.person'" :rules='rules.person' style="width: 200px;margin:0 auto;height: 57px;">
                                <el-select v-model="scope.row.person" placeholder="请选择">
                                    <el-option
                                        v-for="item in personOptions"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="num" label="资源条数">
                        <template slot-scope="scope">
                            <!-- <el-form-item prop="num" style="width: 200px;margin:0 auto;height: 57px;"> -->
                            <el-form-item :prop="'tableData.' + scope.$index + '.num'" :rules='rules.num' style="width: 200px;margin:0 auto;height: 57px;">
                                <el-input @keyup.native.prevent="number(scope.$index, form.tableData)" maxlength="10" v-model="scope.row.num"></el-input>
                            </el-form-item>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="操作" width="120">
                        <template slot-scope="scope">
                            <el-button @click.native.prevent="deleteRow(scope.$index, form.tableData)" type="text" size="small">移除</el-button>
                        </template>
                </el-table-column>
              </el-table>
            </div>
            <div class="padding20 f-tac">            
                <el-button type="primary" :disabled="btnDisabled" @click="submitForm('form')">确认</el-button>
                <el-button @click="reBackRule" >取 消</el-button>
            </div> 
        </el-form>  
    </el-row>
</div>
<!-- import common js-->
<div th:include="_footer_include :: #jsLib"></div>
</body>
<script th:inline="javascript" >
    var itemsVal = ['联展', '竞价', '信息流', '官网','行业','其他'];
    var categoryItemsVal = ['留言', '在线', '免电'];
    //下拉列表电销顾问数据
    var orgUserList=[[${orgUserList}]];
    var updateRule=[[${updateRule}]];
    var AddRuleVM= new Vue({ 
        el: '#addModule',
        data: function() {
            return {
                btnDisabled: false,  
            	categoryArr:[],
            	typeArr:[],
                industryCategoryArr:[],
                form: {
                	assignName:updateRule.assignName,
                    startTime:updateRule.startTime,
                    endTime:updateRule.endTime,
                    type:updateRule.type.split(","),
                    category:updateRule.category.split(","),
                    industryCategory:[],
                    status:updateRule.status+'',//默认value值，启用
                    person:'',
                    searchWord:'',
                    area:'',
                    tableData: []                    
                },
                formLabelWidth: '150px',
                rules:{
                	assignName: [
                        { required: true, message: '规则名称不能为空', trigger: 'blur' }
                    ],
                    startTime: [
                        { required: true, message: '请选择规则有效开始时间', trigger: 'blur' }
                    ],
                    endTime: [
                        { required: true, message: '请选择规则有效结束时间', trigger: 'blur' }
                    ],
                    type: [
                        { type: 'array', required: true, message: '请至少选择一个资源类别', trigger: 'change' }
                    ],
                    category: [
                        { type: 'array', required: true, message: '请至少选择一个资源类型', trigger: 'change' }
                    ],
                    status: [
                        { required: true, required: true, message: '请选择是否启用', trigger: 'change' }
                    ],
                    num: [
                       { required: true, required: true, message: '请添加资源条数', trigger: 'change' }
                    ],
                    person: [
                       { required: true, required: true, message: '请选择组内人员', trigger: 'change' }
                    ]
                },
                options: [{
                    value: '1',
                    label: '启用'
                }, {
                    value: '0',
                    label: '禁用'
                }],
                // tableData: [],
                personOptions:orgUserList,
                tags: [],
                areaTags:[]
            }        	  
        },
        methods: {
            submitForm(form) {
                this.$refs[form].validate((valid) => {
                    if (valid) {
                    //规则成员数据	
                    var saveMemner=[];
                    var memberArry=this.form.tableData ;
                    
                    var assignName=this.form.assignName ;
                    	
                    var startTime=this.form.startTime ;	
                   
                    var endTime=this.form.endTime ;	
                    
                    var category=this.form.category ;

                    var type=this.form.type ;
                    	
                    var status=this.form.status ;	
                    
                    var searchWord=this.tags ;	
                    
                    var area=this.areaTags ;

                    if(endTime<startTime){
                        this.$message({
                            type: 'warning',
                            message: '结束时间不能早于开始时间'
                        });
                        return ;
                    }

                    if(null!=memberArry&&memberArry.length>0) {
                      for(var i=0;i<memberArry.length;i++) {
                            var save={};
                           save.memberId=memberArry[i].person;
                           save.resourceLimit=memberArry[i].num;
                           saveMemner.push(save);
                        }
                    }else{
                        this.$message({
                            type: 'warning',
                            message: '组内人员必输项，请输入!'
                        });
                        return ;
                    }
                    
                    var param={};

                        param.teleAssignRuleMember = saveMemner;
                        // param.assignName=assignName;
                        param.startTime = startTime;
                        param.id = updateRule.id;
                        param.endTime = endTime;
                        var industryCategory = this.form.industryCategory;
                        if (null != industryCategory && industryCategory.length > 0) {
                            param.industryCategory = industryCategory.join(",");
                        }else{
                            param.industryCategory = '';
                        }
                        if (null != category && category.length > 0) {

                            //	param.category=category.join(",");
                        }
                    if(null!=type&&type.length>0){
                    	
                   // 	param.type=type.join(",");
                   }
                   if(null!=searchWord&&searchWord.length>0){
                    	
                    //	param.searchWord=searchWord.join(",");
                   }
                   if(null!=area&&area.length>0){
                   	
                    //	param.area=area.join(",");
                  }
                   param.status=status; 
                   AddRuleVM.btnDisabled = true; 
                   axios.post('/assignrule/teleAssignRule/updateTeleAssignRule',param)
                   .then(function (response) {
                	   AddRuleVM.$message({message:'操作成功',type:'success',duration:2000,onClose:function(){
                         AddRuleVM.btnDisabled = false; 
                		 window.location.href="/assignrule/teleAssignRule/initteleAssignRule"; 
		        	}});
                  });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            reBackRule(){
              	 window.location.href="/assignrule/teleAssignRule/initteleAssignRule"; 
              },
            deleteRow(index, rows) {//删除一行表格
                rows.splice(index, 1);
            },
            handleInputConfirm() {//添加搜索词
                let searchWord = this.form.searchWord;
                if (searchWord) {
                    this.tags.push(searchWord);
                }
                this.form.searchWord = '';
                console.log(searchWord)
                console.log(this.tags)
            },
            handleClose(tag) {//删除搜索词
                this.tags.splice(this.tags.indexOf(tag), 1);
            },
            handleInputConfirmArea() {//添加地区
                let area = this.form.area;
                if (area) {
                    this.areaTags.push(area);
                }
                this.form.area = '';
                console.log(area)
                console.log(this.areaTags)
            },
            handleCloseArea(tag) {//删除地区
                this.areaTags.splice(this.areaTags.indexOf(tag), 1);
            },
            addDomain() {
                this.form.tableData.push({
                  name: '',
                  num: ''
                });
            },
            number(index, rows){
                // console.log(rows)
                // console.log(rows.num)
                for(var i=0;i<rows.length;i++){                    
        　　                                             rows[i].num=rows[i].num.replace(/[^\.\d]/g,'');
                  rows[i].num=rows[i].num.replace('.','');                    
                }
        　　}

        },
        created(){
           //初始资源类别数据
          	var  param={};
          	param.groupCode="clueCategory";
            axios.post('/dictionary/DictionaryItem/dicItemsByGroupCode',param).then(function (response) {  
            	AddRuleVM.categoryArr=response.data.data;
            });
          	 //初始化资源类型数据
       	    param={};
       	   param.groupCode="clueType";
           axios.post('/dictionary/DictionaryItem/dicItemsByGroupCode',param).then(function (response) {  
         	AddRuleVM.typeArr=response.data.data;
            });
            //初始行业类别
            param={};
            param.groupCode="industryCategory";
            axios.post('/dictionary/DictionaryItem/dicItemsByGroupCode',param).then(function (response) {
                AddRuleVM.industryCategoryArr=response.data.data;
            });
           var searchWord=  updateRule.searchWord;
           var area = updateRule.area;
           if(null!=searchWord){
        	  this.tags=searchWord.split(",");
           }
           if(null!=area){
        	   this.areaTags=area.split(",");
           }
           var  memberArr=updateRule.teleAssignRuleMember;
           if(null!=memberArr&&memberArr.length>0) {
        	   for(var i=0;i<memberArr.length;i++) {
                 this.form.tableData.push({
                   person: memberArr[i].memberId,
                   num: memberArr[i].resourceLimit,
                 });
        	   }
              }
           var   industryCategory = updateRule.industryCategory;
           if (null != industryCategory && industryCategory != "" ){
               this.form.industryCategory =    industryCategory.split(",");
           }
        },
        mounted(){
            document.getElementById('addModule').style.display = 'block';
        }
           
           
   
    })
</script>
</html>